<script>

  function loadRoots() {
    $.ajax(
        {
          url: '?listGen&act=lsr',
          type: 'post',
          data: {sectionId: $('#sectionId').val()},
          beforeSend: function(){
            $('#loading').show();
          }
        }
    ).done(function (response) {
          $("#listRoots").html(response);
          $("#rootTitle").show();
          $('#listRoot').on('change', function () {
            $('#subTitle').show();
          });
          $('#loading').hide();
        })
  }

  function submitSubForm() {
    if (!($('#subTitleInput').val() == "")) {
      $('#addSubForm').submit();
    }
  }
</script>
<?php
/**
 * Created by PhpStorm.
 * User: Aliaksei Lazerka
 * Date: 10/22/14
 * Time: 9:39 PM
 */


$result = getMainCategories();

$output = "<select id='sectionId' name='sectionId' onchange='loadRoots()'>";

$output .= "<option style='text-align: center'>-- Выберите вариант из списка --</option>";

while ($row = mysql_fetch_assoc($result)) {
  $output .= "<option value='" . $row['ID'] . "'>" . $row['TITLE'] . "</option>";
}

$output .= "</select>";

?>

<form method="post" id="addSubForm" action="?als">
  <div class="step">
    <div class="stepInfo">
      1. Выберите категорию, в которой находится корневой элемент списка:
    </div>
    <div class="stepSelect"><?= $output ?></div>
  </div>
  <div class="step" style="display: none" id="rootTitle">
    <div class="stepInfo">
      2. Выберите корневой элемент списка, в который Вы хотите добавить новый элемент второго уровня:
    </div>
    <div class="stepSelect">
      <div id="listRoots">
      </div>
    </div>
  </div>
  <div class="step" style="display: none" id="subTitle">
    <div class="stepInfo">
      3. Введите название нового элемента списка второго уровня:
    </div>
    <div class="stepSelect">
      <input type="text" name="subTitle" id="subTitleInput"/>
      <input type="button" value="Добавить" onclick="userAsk('Внимание ! Все поля на форме должны быть заполнены. Если Вы готовы продолжить нажмите Добавить.', submitSubForm)">
    </div>
  </div>
</form>
